<template>
    <view class="empty-state">
      <image 
        class="empty-image" 
        :src="image" 
        mode="aspectFit"
      ></image>
      <text class="empty-text">{{ text }}</text>
      <view v-if="buttonText" class="empty-action">
        <button 
          class="empty-button" 
          @click="handleButtonClick"
        >{{ buttonText }}</button>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    name: 'EmptyState',
    props: {
      image: {
        type: String,
        default: '/static/images/empty.png'
      },
      text: {
        type: String,
        default: '暂无数据'
      },
      buttonText: {
        type: String,
        default: ''
      }
    },
    methods: {
      handleButtonClick() {
        this.$emit('buttonClick');
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60rpx 0;
  }
  
  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 30rpx;
  }
  
  .empty-action {
    margin-top: 20rpx;
  }
  
  .empty-button {
    font-size: 28rpx;
    color: #fff;
    background-color: #3c8dbc;
    border-radius: 6rpx;
    padding: 10rpx 30rpx;
  }
  </style>